<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-28 17:09:05
 * @FilePath: /yuxiuproweb/src/views/goods/curtain/mods/add.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品名" prop="name">
              <el-input v-model="form.name" placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售型号" prop="salesModel">
              <el-input
                v-model="form.salesModel"
                placeholder="请输入销售型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售别名" prop="salesAlias">
              <el-input
                v-model="form.salesAlias"
                placeholder="请输入销售别名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单重(千克/米)" prop="pieceWeight">
              <el-input-number
                style="width: 100%"
                v-model="form.pieceWeight"
                placeholder="请输入单重"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="enableFlag">
              <el-switch
                v-model="form.enableFlag"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售信息" prop="marketingInfo">
              <el-input
                v-model="form.marketingInfo"
                placeholder="请输入销售信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="加工信息" prop="processInfo">
              <el-input
                v-model="form.processInfo"
                placeholder="请输入加工信息"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购方式" prop="procurementMethod">
              <el-radio-group v-model="form.procurementMethod">
                <el-radio label="0">自生产</el-radio>
                <el-radio label="1">外采购</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最小起算" prop="minimum">
              <el-input-number
                style="width: 100%"
                v-model="form.minimum"
                placeholder="请输入最小起算"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="sku图" prop="skuPicture">
              <image-upload v-model="form.skuPicture" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="镂空图" prop="hollowPicture">
              <image-upload v-model="form.hollowPicture" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">价格相关数据</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="价格模型" prop="priceModel">
              <el-select
                v-model="form.priceModel"
                placeholder="请选择价格模型"
                style="width: 100%"
              >
                <el-option label="默认" value="0" />
                <el-option label="布按米" value="1" />
                <el-option label="布按套" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-descriptions
              class="open-right"
              direction="vertical"
              :column="2"
              border
            >
              <el-descriptions-item label="价格">单价</el-descriptions-item>
              <el-descriptions-item label="出厂价">
                <el-form-item label-width="0" prop="factoryPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.factoryPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="ml20 open-right"
              direction="vertical"
              :column="3"
              border
            >
              <el-descriptions-item label="价格"
                >单价<span style="color: red"
                  >(默认价格)</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.wholesalePrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.retailPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">主布相关</span>
          <el-button
            type="primary"
            plain
            size="mini"
            class="ml10"
            @click="fabric.show = true"
            >选择主布面料</el-button
          >
        </div>
        <el-table :data="fabricList">
          <el-table-column label="品名" align="center" prop="name" />
          <el-table-column label="类型" align="center" prop="type">
            <template slot-scope="{ row }">
              {{ getTypeName(TYPE, row.type) }}
            </template>
          </el-table-column>
          <el-table-column label="门幅" align="center" prop="width" />
          <el-table-column label="定高定宽" align="center" prop="widthOrHeight">
            <template slot-scope="{ row }">
              <el-select
                v-model="row.widthOrHeight"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="定宽" value="0" />
                <el-option label="定高" value="1" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ $index }">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleFabricDelete($index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">布绑列表</span>
          <el-button
            type="primary"
            plain
            size="mini"
            class="ml10"
            @click="other.show = true"
            >选择布绑</el-button
          >
        </div>
        <el-table :data="otherList">
          <el-table-column
            label="是否标配"
            align="center"
            prop="isStandardConfig"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isStandardConfig"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="布绑" align="center" prop="name" />
          <el-table-column label="单位" align="center" prop="unitName">
            <template slot-scope="{ row }">
              {{
                getTypeName(dict.type.md_other_material_unit_name, row.unitName)
              }}
            </template>
          </el-table-column>
          <el-table-column label="是否启用" align="center" prop="isEnable">
            <template slot-scope="{ row }">{{
              row.isEnable === "Y" ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column
            label="排序"
            align="center"
            prop="sort"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-top"
                :disabled="scope.$index === 0"
                @click="handleMove(scope.$index, 'top', 'otherList')"
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                :disabled="scope.$index + 1 === otherList.length"
                @click="handleMove(scope.$index, 'bottom', 'otherList')"
                >下移</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, 'otherList')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">复杂加工列表</span>
          <el-button
            type="primary"
            plain
            size="mini"
            class="ml10"
            @click="machine.show = true"
            >选择复杂加工</el-button
          >
        </div>
        <el-table :data="machineList">
          <el-table-column
            label="是否标配"
            align="center"
            prop="isStandardConfig"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isStandardConfig"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必填"
            align="center"
            prop="isRequired"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isRequired"
                :disabled="row.isStandardConfig !== 'Y'"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="复杂加工"
            align="center"
            prop="complexMachiningName"
          />
          <el-table-column
            label="详情"
            align="center"
            prop="isDescribe"
            show-overflow-tooltip
          />
          <el-table-column
            label="是否启用"
            align="center"
            prop="enableFlag"
            width="100"
          >
            <template slot-scope="{ row }">
              {{ row.enableFlag === "Y" ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            label="排序"
            align="center"
            prop="sort"
            class-name="small-padding fixed-width"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-top"
                :disabled="scope.$index === 0"
                @click="handleMove(scope.$index, 'top', 'machineList')"
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                :disabled="scope.$index + 1 === machineList.length"
                @click="handleMove(scope.$index, 'bottom', 'machineList')"
                >下移</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, 'machineList')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 选择主布面料 -->
    <fabric-part-view
      v-if="fabric.show"
      :show.sync="fabric.show"
      @on-change="handleFabricChange"
    ></fabric-part-view>
    <!-- 选择布绑 -->
    <other-part-view
      v-if="other.show"
      :show.sync="other.show"
      @on-change="handleOtherChange"
    ></other-part-view>
    <!-- 选择复杂加工 -->
    <machine-part-view
      v-if="machine.show"
      :show.sync="machine.show"
      @on-change="handleMachineChange"
    ></machine-part-view>
  </el-dialog>
</template>

<script>
import { getCurtain, addCurtain, updateCurtain } from "@/api/goods/curtain";
import { TYPE } from "../../../material/fabric/configure";
import FabricPartView from "@/views/material/fabric/mods/part.vue";
import OtherPartView from "@/views/material/other/mods/part.vue";
import MachinePartView from "@/views/process/machine/mods/part.vue";
export default {
  dicts: ["md_other_material_unit_name"],
  components: {
    FabricPartView,
    OtherPartView,
    MachinePartView,
  },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      TYPE,
      fabric: {
        show: false,
      },
      fabricList: [], // 主布列表
      other: {
        show: false,
      },
      otherList: [], // 布绑列表
      machine: {
        show: false,
      },
      machineList: [], // 复杂加工列表
      // 表单参数
      form: {
        customCurtainId: null,
        name: null,
        salesModel: null,
        salesAlias: null,
        pieceWeight: null,
        enableFlag: "N",
        marketingInfo: null,
        processInfo: null,
        procurementMethod: "0",
        minimum: null,
        skuPicture: null,
        hollowPicture: null,
        priceModel: null,
        factoryPrice: null,
        wholesalePrice: null,
        retailPrice: null,
        fabricId: null,
        productType5Ids: null,
        complexMachining: null,
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "品名不能为空", trigger: "change" }],
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加定制窗帘",
        edit: "修改定制窗帘",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      const customCurtainId = this.data.customCurtainId;
      getCurtain(customCurtainId).then((response) => {
        this.form = response.data;
        this.fabricList = [
          {
            ...this.form?.fabric,
            widthOrHeight: this.form.widthOrHeight,
          },
        ];
        this.otherList = this.form.productType5List?.map((e) => {
          return {
            ...e,
            name: e?.otherMaterial?.name,
            unitName: e?.otherMaterial?.unitName,
            isEnable: e?.otherMaterial?.isEnable,
          };
        });
        this.machineList = this.form.complexMachiningList?.map((e) => {
          return {
            ...e,
            complexMachiningName: e.complexMachining?.complexMachiningName,
            enableFlag: e.complexMachining?.enableFlag,
            isDescribe: e.complexMachining?.isDescribe,
          };
        });
      });
    },
    /** 选择主布 */
    handleFabricChange(data) {
      this.fabricList = [
        {
          ...data,
          widthOrHeight: "0",
        },
      ];
    },
    /** 删除主布 */
    handleFabricDelete(index) {
      this.fabricList.splice(index, 1);
    },
    /** 选择布绑 */
    handleOtherChange(data) {
      const list = data.filter(
        (e) =>
          !this.otherList?.find((v) => v.productModelId === e.otherMaterialId)
      );
      this.otherList = [
        ...this.otherList,
        ...list?.map((e) => ({
          productModelId: e.otherMaterialId,
          name: e.name,
          unitName: e.unitName,
          isEnable: e.isEnable,
          customCurtainId: "",
          isStandardConfig: "N",
        })),
      ];
    },
    /** 选择复杂加工 */
    handleMachineChange(data) {
      const list = data.filter(
        (e) =>
          !this.machineList?.find(
            (v) => v.complexMachiningId === e.mdComplexMachiningId
          )
      );
      this.machineList = [
        ...this.machineList,
        ...list?.map((e) => ({
          complexMachiningId: e.mdComplexMachiningId,
          complexMachiningName: e.complexMachiningName,
          enableFlag: e.enableFlag,
          isDescribe: e.isDescribe,
          customCurtainId: "",
          serialNumber: "",
          isStandardConfig: "N",
          isRequired: "N",
        })),
      ];
    },
    // 移动
    handleMove(index, type, key) {
      switch (type) {
        case "top": {
          const temp = { ...this?.[key]?.[index] };
          const temp1 = { ...this?.[key]?.[index - 1] };
          this.$set(this[key], index - 1, temp);
          this.$set(this[key], index, temp1);
          break;
        }
        case "bottom": {
          const temp = { ...this?.[key][index] };
          const temp1 = { ...this?.[key]?.[index + 1] };
          this.$set(this[key], index + 1, temp);
          this.$set(this[key], index, temp1);
          break;
        }
        default:
          break;
      }
    },
    /** 移除 */
    handleDelete(index, key) {
      this?.[key]?.splice(index, 1);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const [fabricItem] = this.fabricList;
          this.form.fabricId = fabricItem?.mdFabricId;
          this.form.widthOrHeight = fabricItem?.widthOrHeight;
          this.form.productType5List = this.otherList?.map((e, index) => {
            return {
              ...e,
              customCurtainId: this.form.customCurtainId,
              serialNumber: index + 1,
            };
          });
          this.form.complexMachiningList = this.machineList?.map((e, index) => {
            return {
              ...e,
              customCurtainId: this.form.customCurtainId,
              serialNumber: index + 1,
            };
          });
          if (this.form.customCurtainId != null) {
            updateCurtain(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addCurtain(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
